<template>
  <div class="page">
    <div class="box" :style="item.style.value" v-for="(item, index) in list" :key="index">{{ item.num }}</div>
    <button @click="start" style="margin-top:100px;">开始</button>
  </div>
</template>
<script>
import { gsap } from '../../libs/gsap-3.11.1.min.js'
import { mat4 } from '../../libs/glmatrix/gl-matrix-min.js'
import { ref, markRaw } from 'vue'
export default {
  data() {
    return {
      list: [],
      isLoad: false
    }
  },
  methods: {
    start() {
      this.list.forEach((res) => {
        res.tl.play()
      })
    },
    buildStyle(obj, m) {
      let style = {
        transform: `matrix3d(${m.join(',')})`
      }
      obj.style.value = style
    }
  },
  mounted() {
    //10个为基准，事件随便调，跟随状态
    let time = 3
    let num = 10
    //time / num * (200 / time) = 200 / num = w
    for (var i = 0; i < num; i++) {
      let obj = {
        num: i,
        style: ref({})
      }
      this.list.push(markRaw(obj))
      let s = mat4.create()
      mat4.translate(s, s, [0, 0, 10 - i])
      this.buildStyle(obj, s)
      let tl = gsap.timeline({
        delay: i * (time / num),
        paused: true
      })
      let e1 = mat4.create()
      let p1 = {
        x: 0
      }
      tl.to(p1, time, {
        x: 1,
        ease: Power0.easeNone,
        onUpdate: () => {
          mat4.translate(e1, s, [200 * p1.x, 0, 0])
          console.log(e1)
          this.buildStyle(obj, e1)
        }
      })
      let p2 = {
        x: 0
      }
      //转一圈的时间正好等于上面移动的时间
      let e2 = mat4.create()
      tl.to(p2, time, {
        x: 1,
        repeat: -1,
        ease: Power0.easeNone,
        onUpdate: () => {
          let m = mat4.create()
          mat4.translate(m, m, [200, 50, 0])
          mat4.rotate(m, m, Math.PI * 2 * p2.x, [0, 0, 1])
          mat4.translate(m, m, [-200, -50, 0])
          mat4.mul(e2, m, e1)
          this.buildStyle(obj, e2)
        }
      })
      obj.tl = tl
    }
  }
}
</script>
<style type="text/css">
.page {
  height: 100vh;
  width: 100vw;
  transform-style: preserve-3d;
}
.box {
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 0;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  background: #fff;
}
</style>
